﻿@{
    ViewBag.Title = "Import Data";
}
   <script type="text/javascript">
       $(function () { //On the load event of the page when the page is ready for processing
           $('select').selectmenu({}); //Styling of select controls
           $("#error").find("p").remove().end(); //Remove all errors
           $("input:submit, input:file").button(); //attach a button to the input control 
           $("#fund").change(function () //attach the selected change event to the select control, this is to get the employer object for the selected fund
           {
               GetEmployer(); //Call the method to get the employer
           }
            );
           GetEmployer();//Call the method to get the employer

       });

       //-------- AJAX method to the the Employer objects  --------//
       function GetEmployer() {//Get the default load employer object
           var tempViewModel = { Fund: ko.observableArray([]) }; //Create the array object to be sent over the wire
           tempViewModel.Fund.push({ FundId: $("#fund").val() }); //Set the values to the array object
           var d = ko.toJSON(tempViewModel.Fund); //Convetr it to Knockout JSON object
           var a = $.parseJSON(d); //Use JQuery to Serialise the JSON Data object
           $.ajax({
               url: '/Data/GetEffectivePeriod', //the url of the action that is being called
               type: "POST", //Method of the ajax
               contentType: 'application/json; charset=utf-8', //type of data being sent over the wire
               data: JSON.stringify(a), //the data object being sent as json - serialize the JSON object 
               success: function (data) //success method that is called 
               {
                   $("#error").find("p").remove().end(); //Remove all errors
                   var cnt = 0;//Holder for the counter of the items in the select control
                   $("#employer").find("option").remove().end(); //Remove the previouse options that were in the select control
                   $.each(data, function () //Loop through the data that is recieved
                   {
                       $.each(this, function (k, v) // loop through the items in the model
                       {
                           $("#employer").append("<option value='" + v.EffectivePeriod + "' >" + v.EmployerName + "</option>"); //add the items to the select control
                           cnt = cnt + 1;//increment the counter for the items in the select control
                       });

                   });
                   if (cnt == 0) { $("#error").append("<p>The fund has no employers set.</p>"); }//Display the error that there are no employers for the fund
                   $('select#employer').selectmenu({}); //attach the selected change event to the select control, this is to display the employer and have the value of effective period
                   
               },
               error: function (xhr, ajaxOptions, thrownError) //the failed method being called if ajax method failed
               {
                   $("#error").append("<p>The server did not serve the request properly :" + thrownError + "   " + xhr.status + "</p>"); //Insert the error from the server
               }
           });
        }

</script>
<h2>Data Import</h2>
<p>
     This page is designed to help you to import data from extrenal applications, and validate the records based on the rules of the system. 
     Currently the application supports one type of file [ .xls & .xlsx (which are Excel files)]. 
     The validation rules are preconfigured on verious other screens within the application.
</p>
<div>
<div id="error" style="color:Red; font-style:italic; font-size:10px; text-align:left; padding-left:20px;">

</div>
@using (Html.BeginForm("DataImport", "Data", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <table>
        <tr>
            <td style="width: 150px;">
            Fund:
            </td>
            <td>
                <select id="fund" name="fund" style="width:200px;">
                @foreach (var fundItem in new Host.Models.Data().Fund.Select(x => x))
                {
                <option value="@fundItem.FundId">@fundItem.FundName</option>
                }
                </select>
            </td>
        </tr>
        <tr id="trEmployer">
            <td>
                Employer:
            </td>
            <td>
                <select name="employer" id="employer" style="width:200px;"></select>
            </td>
        </tr>
        <tr>
            <td style="width: 150px;"><label>Data File [Excel] :</label></td>
            <td>
            <input type="file" name="file" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
            <br />
                <input type="submit" name="upload" value="Upload & Validate" />
            </td>
        </tr>
    </table>
}

</div>
